import React ,{Component} from 'react'
import style from './css/Product-img.css'
import ProductLittleImg from './ProductLittleImg'

class ProductBigImg extends Component{
    constructor(props){
        super(props)
        this.state={
            images: 'img/TB2QsDanpXXXXcYXpXXXXXXXXXX_!!207592.jpg'
        }
    }
    transferimg(images) {
        this.setState({
            images
        });
    }
    render(){
        return(
            <div>
                <div id={style.bigimg} >
                    <img className={style.imggg} src={this.state.images} alt={this.state.images} width="400" />
                </div>
                <div id={style.img1}>
                    <ProductLittleImg  transferimg={images => this.transferimg.bind(this,images)} img='img/TB2QsDanpXXXXcYXpXXXXXXXXXX_!!207592.jpg'/>
                </div>
                <div id={style.img2}>
                    <ProductLittleImg  transferimg={images => this.transferimg.bind(this,images)} img='img/TB1OcJwMXXXXXbjXFXXXXXXXXXX_!!0-item_pic.jpg'/>
                </div>
                <div id={style.img3}>
                    <ProductLittleImg transferimg={images => this.transferimg.bind(this,images)} img='img/TB2lpdUlFXXXXa4XXXXXXXXXXXX_!!207592.jpg'/>
                </div>
                <div id={style.img4}>
                    <ProductLittleImg  transferimg={images => this.transferimg.bind(this,images)} img='img/TB2wfJYlFXXXXaxXXXXXXXXXXXX_!!207592.jpg'/>
                </div>
            </div>
        )
    }
}

export default ProductBigImg